import React, { useState, useEffect } from 'react'
import { Modal, Toast } from 'antd-mobile'

import { useStore } from 'react-redux';
import { checkBank, getCheckNum } from '@api/auth'

import { CheckStatusStyle } from '../../style.js'
import { useHistory } from 'react-router-dom';

import { mixRoute } from '@/utils'




const prompt = Modal.prompt;

const BottomChecking = () => (
  <>
    <div className="hidden">
    </div>
    <div className="service flex-row">
      <img src="https://res.lexiangpingou.cn/images/826/2020/09/wu11GRRGng0I1vgMI0g6n1gOv6s1UM.png" alt="" />
      <span>联系客服</span>
    </div>
  </>
)

const BottomCheckingBank = () => {

  const history = useHistory();
  return (
    <>
      <div className="service flex-row"
        style={{
          marginTop: '.8rem'
        }}
      >
        <img src="https://res.lexiangpingou.cn/images/826/2020/09/wu11GRRGng0I1vgMI0g6n1gOv6s1UM.png" alt="" />
        <span>联系客服</span>
      </div>

      <button className="large-button"
        onClick={() => {
          mixRoute(history, '/')
        }}
        style={{
          marginBottom: '.4rem'
        }}
      >
        去首页
      </button>

    </>
  )
}


const Service = (props) => (


  <>
    <div className="service flex-row"
      style={{
        marginTop: '.8rem'
      }}
      onClick={() => { props.isApplet ? window.goService() : console.log('不是小程序') }}
    >
      <img src="https://res.lexiangpingou.cn/images/826/2020/09/wu11GRRGng0I1vgMI0g6n1gOv6s1UM.png" alt="" />
      <span>联系客服</span>
    </div>
  </>
)



const CheckStatus = (props) => {

  const history = useHistory();
  let store = useStore();
  const { uniacid, isApplet } = store.getState().appConfig

  let num = 3

  const [number, setNumber] = useState(num);

  const { status, bankStatus } = props;

  const checking = (status === -1 && bankStatus === 0);

  const checkingWait = (status === 1 && bankStatus === 0); // 等待平台打款 校验

  const checkingBank = (bankStatus === 1 && status === 1);

  const checked = (status === 1 && bankStatus === 2);
  const fail = (status === 2);

  const img_checking = 'https://res.lexiangpingou.cn/images/826/2020/10/TD1HVt7DhYdST8SVO4WQ18SWcw8H2L.png';
  const img_checked = 'https://res.lexiangpingou.cn/images/826/2020/10/r2Fu05p0fuuVVtYqyyyQ2QYz2yM2F7.png';
  const img_fail = 'https://res.lexiangpingou.cn/images/826/2020/10/Hdb1p9P15PowC0gv5WWgWv1Zvopc1B.png';



  useEffect(() => {
    getCheckNum(uniacid).then(res => {
      let aa = number - parseInt(res.data)
      if (aa >= 0) {
        setNumber(aa)
      } else {
        setNumber(0)
      }
    })
    return () => {
      // cleanup
    }
  }, [])


  return (
    <>
      <CheckStatusStyle>
        <div className="top flex-column">
          <div className="content flex-column">
            {checkingWait && <img src={img_checking} alt="" />}
            {checkingBank && <img src={img_checking} alt="" />}
            {checking && <img src={img_checking} alt="" />}
            {checked && <img src={img_checked} alt="" />}
            {fail && <img src={img_fail} alt="" />}

            <p className="status-title">
              {checking && "资料审核中!"}
              {checkingWait && "资料已审核"}

              {checkingBank && "资料已审核"}
              {checked && "审核已通过"}
              {fail && "审核已驳回"}


            </p>

            {
              checking &&
              <div className="checking-detail">
                平台将于通常会在2小时内完成资料审核 急单请联系客服
              </div>
            }

            {
              checkingWait &&
              <div className="checking-detail">
                平台将向您打款 ，请耐心等待
              </div>
            }



            {
              checkingBank &&
              <div className="checking-bank">
                <p>你还剩 <span
                  style={{
                    color: '#ff762e'
                  }}
                >{number}</span> 次机会</p>
                <button className="hd-button"
                  onClick={() => number > 0 ? prompt(
                    '请输入您收到的打款金额',
                    '如：0.33',
                    [
                      { text: '取消' },
                      { text: '确认', onPress: value => { checkBankBalance(value) } },
                    ], 'default', '') : Toast.info('次数已用完，请联系客服', 2)}
                  style={{
                    width: '4.63rem',
                    height: '.95rem'
                  }}
                >
                  校验银行卡
                </button>
              </div>
            }

            {
              checked &&
              <div className="checked">
                <button className="hd-button"
                  onClick={() => { mixRoute(history, '/') }}
                  style={{
                    width: '4.63rem',
                    height: '.95rem'
                  }}
                >
                  快去采购吧
                </button>
              </div>
            }

            {fail &&

              <div className="fail-detail">
                <p>驳回原因：资料上传不完整请重新提交</p>
                <button className="hd-button"
                  style={{
                    width: '4.63rem',
                    height: '.95rem'
                  }}
                >
                  修改资料
                </button>

              </div>

            }


          </div>


        </div>
        <div className="bottom">
          <div className="content flex-column">

            {checking && <BottomChecking />}
            {checkingBank && <BottomCheckingBank />}
            {checked && <Service isApplet={isApplet} />}
            {checkingWait && <BottomCheckingBank />}
            {fail && <Service isApplet={isApplet} />}


          </div>
        </div>
      </CheckStatusStyle>
    </>
  )

  function checkBankBalance(val) {
    checkBank(val, uniacid).then(res => {
      console.log(res)
      if (res.status === 400) {
        Toast.fail(res.msg, 1)
        let a = num - parseInt(res.data)
        if (a >= 0) {
          setNumber(a)
        } else {
          setNumber(0)
        }
      } else if (res.status === 200) {
        Toast.success(res.msg, 1)
        window.location.reload()
      } else {
        Toast.offline('网络错误', 1)
      }

    })

  }

}

export default CheckStatus

